import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Platform,
    Dimensions,
    TouchableOpacity,
    Image,
    Alert,
    FlatList,
    TextInput,
    Linking,
    DeviceEventEmitter,
    ScrollView
} from 'react-native';

import moment from 'moment';
import HttpUtils from '../../utils/HttpUtils';
import HttpUrls from '../../utils/HttpUrls';
import AndroidModule from "../../utils/AndroidConnent";
import { ToastToUser } from "../../utils/CustomToast";
import Constant from '../../utils/Constant'
import NoData from '../../utils/NoData'
import Loading from "../../utils/Loading";
import { getImgUrl } from '../../utils/ComFunction'


let navigation

export default class StoreInfo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {},
        }
    }

    componentWillUnmount() {
        // this.unsubscribe();
      }

    componentDidMount() {
        // this.unsubscribe = this.props.navigation.addListener('focus', () => {
        //     if (this.props.route.params?.editSuccess) {
              
        //     }
        //   });
        this.getStoreInfo()
    }

    render() {
        navigation = this.props.navigation;
        return (
            <View style={styles.container}>
                <Header navigation={navigation} Title={'门店详情'} RightButton={() => this.renderRightButton()}></Header>

                <View style={{ flex: 1 }}>
                    <ScrollView>
                        <View style={styles.storeInfoBox}>
                            {
                                this.state.data.storePic ?
                                    <Image style={styles.storeImg} source={{ uri: getImgUrl(this.state.data.storePic) }} />
                                    :
                                    <Image style={styles.storeImg} source={require('source/image/company_header_icon.png')} />
                            }
                            <View style={styles.storeBottomBox}>
                                <Text style={styles.storeLogoText}>公司LOGO</Text>
                                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                    {
                                        this.state.data.merchantLogoPic ?
                                            <Image style={styles.logoImg} source={{ uri: getImgUrl(this.state.data.merchantLogoPic) }} />
                                            :
                                            <Image style={styles.logoImg} source={require('source/image/comm/sc_default.png')} />
                                    }
                                </View>
                            </View>
                        </View>
                        <View style={[styles.sectionBox, { marginTop: 10 }]}>
                            <View style={styles.storeItemBox}>
                                <Text style={styles.storeTitleText}>公司全称</Text>
                                <Text style={styles.storeTitleText}>{this.state.data.merchantName}</Text>
                            </View>
                            <View style={styles.storeItemBox1}>
                                <Text style={styles.storeTitleText}>公司简称</Text>
                                <Text style={styles.storeTitleText}>{this.state.data.merchantAbbreviation}</Text>
                            </View>
                        </View>
                        <View style={[styles.sectionBox, { marginTop: 10 }]}>
                            <View style={styles.storeItemBox}>
                                <Text style={styles.storeTitleText}>联系人</Text>
                                <Text style={styles.storeTitleText}>{this.state.data.owner}</Text>
                            </View>
                            <View style={styles.storeItemBox}>
                                <Text style={styles.storeTitleText}>联系电话</Text>
                                <Text style={styles.storeTitleText}>{this.state.data.phone}</Text>
                            </View>
                            <View style={styles.storeItemBox}>
                                <Text style={styles.storeTitleText}>地区</Text>
                                <Text style={styles.storeTitleText}>{this.state.data.districtName ? this.state.data.provinceName+this.state.data.cityName+this.state.data.districtName:''}</Text>
                            </View>
                            <View style={styles.storeItemBox2}>
                                <Text style={styles.storeTitleText}>详细地址</Text>
                                <Text style={styles.storeDesText}>{this.state.data.address}</Text>
                            </View>
                        </View>
                        <View style={[styles.sectionBox, { marginTop: 10, minHeight: 100, paddingBottom: 12 }]}>
                            <Text style={[styles.storeTitleText, {marginTop: 14}]}>公司介绍</Text>
                            {
                                this.state.data.merchantProfile ?
                                <Text style={styles.introDes}>{this.state.data.merchantProfile}</Text>
                                :
                                null
                            }
                            
                        </View>
                    </ScrollView>
                </View>

                <Loading onRef={(ref) => (this.Loading = ref)} />
            </View>
        )
    }

    renderRightButton() {
        return (
            <TouchableOpacity
                activeOpacity={0.8}
                onPress={this.edit}>
                <View style={styles.rightBox}>
                    <Text style={styles.rightText}>编辑</Text>
                </View>
            </TouchableOpacity>
        )
    }

    edit = () => {
        navigation.navigate('StoreEdit', {
            completion: ()=>{
                navigation.goBack()
                this.getStoreInfo()
            }
        })
    }

    getStoreInfo() {
        if (this.Loading) {
            this.Loading.show();
        }
        let param = {
            merchantId: Constant.userInfo.merchantId,
        }
        HttpUtils.getRequest(HttpUrls.getMerchantDetail, param)
            .then((result) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
                if (result.code == 0) {
                    let data = result.data
                    this.setState({
                        data: data
                    })
                } else {
                    ToastToUser(result.msg ? result.msg : result.statusText)
                }
            })
            .catch((error) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
            });
    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F9F9F9',
    },
    rightBox: {
        height: '100%',
        width: 70,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
    },
    rightText: {
        fontSize: 16,
        color: '#333333',
        fontWeight: 'bold',
    },
    dutyBox: {
        width: '100%',
        height: 100,
        flexDirection: 'column',
        justifyContent: 'flex-start'
    },
    storeInfoBox: {
        width: '100%',
        height: 230,

    },
    storeImg: {
        width: '100%',
        height: '100%',
    },
    storeBottomBox: {
        position: 'absolute',
        bottom: 0,
        width: '100%',
        height: 89,
        backgroundColor: 'rgba(255,255,255,0.8)',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 15,
    },
    storeLogoText: {
        color: '#333',
        fontSize: 16
    },
    logoImg: {
        width: 54,
        height: 54,
        borderRadius: 27
    },
    arrowImg: {
        marginLeft: 10,
        width: 15,
        height: 15
    },
    sectionBox: {
        flexDirection: 'column',
        paddingHorizontal: 15,
        backgroundColor: '#fff',
    },
    storeItemBox: {
        width: '100%',
        height: 44,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        borderBottomColor: '#e4e4e4',
        borderBottomWidth: 0.3
    },
    storeItemBox1: {
        width: '100%',
        height: 44,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    storeItemBox2: {
        minHeight: 44,
        width: '100%',
        paddingVertical: 10,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    storeTitleText: {
        color: '#333',
        fontSize: 14,
    },
    storeDesText: {
        textAlign: 'right',
        flex: 1,
        color: '#333',
        fontSize: 14,
        marginLeft: 20,
        lineHeight: 20,
    },
    introDes: {
        marginTop: 6,
        fontSize: 14,
        color: '#333',
        lineHeight: 20

    }
})